<template>
  <div class="comp-time">
    <div>{{ year }}</div>
    <Row index="" type="flex" justify="space-between" align="middle">
      <Col span="2" align="center" style="width:100px">
        <Icon
          type="md-arrow-dropleft-circle"
          size="24"
          @click="firstSevenWeeks"
        />
        <Icon type="ios-arrow-dropleft-circle" size="24" @click="firstAweek" />
      </Col>
      <Col
        span="2"
        v-for="(item, index) in dates"
        :key="index"
        align="center"
        style="width:120px"
      >
        <Button style="height: 70px;width:120px;padding:0">
          <div>{{ item.week }}周</div>
          <div>
            {{ item.startMonth + 1 }}月{{ item.startDay }}日—{{
              item.endMonth + 1
            }}月{{ item.endDay }}日
          </div>
        </Button>
      </Col>
      <Col span="2" align="center" style="width:60px">
        <Icon type="ios-arrow-dropright-circle" size="24" @click="lastAweek" />
        <Icon
          type="md-arrow-dropright-circle"
          size="24"
          @click="lastSevenWeeks"
        />
      </Col>
    </Row>
  </div>
</template>
<script>
import dayjs from 'dayjs'

var weekOfYear = require('dayjs/plugin/weekOfYear')
dayjs.extend(weekOfYear)

export default {
  data () {
    return {
      year: '',

      dates: [
        // {
        //   week: 2,
        //   startYear: 0,
        //   startMonth: 6,
        //   startDay: 15,
        //   endYear: 0,
        //   endMonth: 6,
        //   endDay: 21
        // }
      ],

      current: {
        week: 0,
        startYear: 0,
        endYear: 0,
        weekFirstDay: '',
        weekLastDay: ''
      }
    }
  },
  mounted () {
    this.getDates()
  },
  methods: {
    getYear () {
      if (
        this.dates[0].startYear !== this.dates[this.dates.length - 1].endYear
      ) {
        this.year = `${this.dates[0].startYear}学年～${
          this.dates[this.dates.length - 1].endYear
        }学年`
      } else {
        this.year = `${this.dates[0].startYear}学年`
      }
    },

    // 前7周
    firstSevenWeeks () {
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).subtract(7, 'week')
      this.dates = []
      this.getDates(weekInfo)
      this.getYear()
    },

    // 前1周
    firstAweek () {
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).subtract(7, 'day')
      this.dates = []
      this.getDates(weekInfo)
      this.getYear()
    },

    // 后1周
    lastAweek () {
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).add(7, 'day')
      this.dates = []
      this.getDates(weekInfo)
      this.getYear()
    },

    // 后7周
    lastSevenWeeks () {
      let weekFirstDay = this.current.weekFirstDay || ''
      const weekInfo = dayjs(weekFirstDay).add(7, 'week')
      this.dates = []
      this.getDates(weekInfo)
      this.getYear()
    },

    getDates (date) {
      this.getCurrentWeek(date) // 获取当前周
      this.calcAWeekData() // 获取7周（当前周 前后3周）
      this.getYear()
    },
    getWeek (date) {
      const weekFirstDay = dayjs(date).startOf('week') // 6.13  7.13
      const weekLastDay = dayjs(date).endOf('week')
      const week = dayjs(weekFirstDay).week() // 29
      const startYear = dayjs(weekFirstDay).year() // 29
      const endYear = dayjs(weekLastDay).year() // 29

      return { startYear, endYear, week, weekFirstDay, weekLastDay }
    },

    getDateObj (date) {
      return {
        startYear: dayjs(date.weekFirstDay).year(), // 29
        endYear: dayjs(date.weekLastDay).year(), // 29
        week: date.week,
        startMonth: date.weekFirstDay.$M,
        startDay: date.weekFirstDay.$D,
        endMonth: date.weekLastDay.$M,
        endDay: date.weekLastDay.$D
      }
    },

    getCurrentWeek (date) {
      this.current = this.getWeek(date)
      this.dates.push(this.getDateObj(this.current))
    },

    calcAWeekData () {
      this.firstThreeWeeks()
      this.lastThreeWeeks()
    },

    firstThreeWeeks () {
      let i = 1
      let weekFirstDay = this.current.weekFirstDay || ''
      while (i < 4) {
        weekFirstDay = dayjs(weekFirstDay).subtract(7, 'day')
        const weekInfo = this.getWeek(weekFirstDay)
        this.dates.unshift(this.getDateObj(weekInfo))
        i++
      }
    },

    lastThreeWeeks () {
      let i = 1
      let weekFirstDay = this.current.weekFirstDay || ''
      while (i < 4) {
        weekFirstDay = dayjs(weekFirstDay).add(7, 'day')
        const weekInfo = this.getWeek(weekFirstDay)
        this.dates.push(this.getDateObj(weekInfo))
        i++
      }
    }
  }
}
</script>
<style lang="less" scoped>
.comp-time {
  //   margin-left: -10px;
}
</style>
